/*
 * Copyright(C) 2019 FUYUN DATA SERVICES CO.,LTD. - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * 该源代码版权归属福韵数据服务有限公司所有
 * 未经授权，任何人不得复制、泄露、转载、使用，否则将视为侵权
 */

import { Button, Col, Form, Icon, Input, Row } from "antd";
import { FormComponentProps } from "antd/lib/form";
import { connect } from "react-redux";
import { IRootState, Dispatch } from "../../store";
import { RouteComponentProps } from "react-router-dom";
import * as React from "react";
import "./Login.scss";

const mapStateToProps = ({ user }: IRootState) => ({
  user
});
const mapDispatchToProps = ({ user }: Dispatch) => ({
  login: (payload: any) => user.login(payload)
});

type connectedProps = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>;

const FormItem = Form.Item;

interface IProps extends RouteComponentProps<any> {}
interface IState {
  isLoading: boolean;
}

class Login extends React.Component<
  IProps & FormComponentProps & connectedProps,
  IState
> {
  public handleSubmit = (e: any) => {
    e.preventDefault();
    const { form, login } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        login({ ...values });
      }
    });
  };
  public render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Row
        type="flex"
        justify="center"
        className="loginContainer"
        style={{ height: "100%" }}
      >
        <Col
          xxl={6}
          xl={8}
          lg={10}
          md={13}
          sm={16}
          xs={20}
          style={{ marginTop: "18%" }}
        >
          <h4 className="title">欢迎登录惠有系统</h4>
          <div className="login">
            <Form onSubmit={this.handleSubmit}>
              <FormItem>
                {getFieldDecorator("account", {
                  rules: [{ required: true, message: "请输入用户名！" }]
                })(
                  <Input
                    prefix={
                      <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="请输入用户名"
                  />
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator("password", {
                  rules: [{ required: true, message: "请输入密码" }]
                })(
                  <Input
                    prefix={
                      <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    type="password"
                    placeholder="请输入密码"
                  />
                )}
              </FormItem>
              <FormItem>
                <Row type="flex" justify="center">
                  <Col span={8}>
                    <Button
                      type="primary"
                      className="form-submit"
                      htmlType="submit"
                    >
                      登录
                    </Button>
                  </Col>
                </Row>
              </FormItem>
            </Form>
          </div>
        </Col>
      </Row>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create<IProps & FormComponentProps>({})(Login));
